<template>
  <div style="width: 100%; padding: 10px; height: calc(100vh - 200px); overflow-y: auto;">
    <!-- 修改记录内容 -->
    <div v-if="recordInfos">
      <div v-for="(item, index) in recordInfos" :key="index">
        <!-- 标题 -->
        <div style="display: flex; align-items: center; margin-bottom: 15px;">
          <div class="divider" style="flex: 1;"></div>
          <span style="color: rgba(55, 65, 81, 0.76); opacity: 0.5; margin: 0 16px; white-space: nowrap;">
            {{ item.dateGroup }}
          </span>
          <div class="divider" style="flex: 1;"></div>
        </div>
        <!-- 数据 -->
        <div v-for="(child, childIndex) in item.recordEntityList" :key="childIndex" style="margin-top: 15px;">
          <div>
            <span style="font-weight: 600; font-size: medium;">{{ child.userNickName }}:</span>
            <span style="color: rgba(55, 65, 81, 0.76); font-size: 15px; margin-left: 15px;">{{ child.createTime }}</span>
          </div>
          <div style="margin:5px 10px;" v-if="child.eventType === '修改'">
            <span style="margin-left: 10px; color: rgba(1, 128, 165); font-weight: bold;">·</span>
            <span style="margin-left: 10px; font-size: 15px; font-style: italic; color: rgba(1, 128, 165);">
              {{ child.eventType }}
            </span>
            <span style="margin-left: 10px;">{{ child.oldValue }}</span>
            <el-icon style="margin-left: 10px;">
              <Right />
            </el-icon>
            <span style="margin-left: 10px; color: rgba(1, 128, 165); font-weight: bold;">{{ child.newValue }}</span>
            <span style="margin-left: 10px; font-style: italic; color: rgba(55, 65, 81, 0.76);">({{ child.filedName }})</span>
          </div>
          <div style="margin:5px 10px;" v-if="child.eventType === '新建'">
            <span style="margin-left: 10px; font-size: 15px; font-style: italic; color: rgba(1, 128, 165);">
              新建了数据
            </span>
          </div>
          <div style="margin:5px 10px;" v-if="child.eventType === '备注'">
            <span style="margin-left: 10px; color: rgba(1, 128, 165); font-weight: bold;">·</span>
            <span style="margin-left: 10px; color: rgba(1, 128, 165); font-weight: bold;">{{ child.newValue }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { Right } from '@element-plus/icons-vue';
import type { BaseRecordVo } from '@/types/basetypes';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
  recordInfos: BaseRecordVo[];
}>();
</script>

<style scoped>
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style> 